<!DOCTYPE html>
<html>
<head>
<title>{$site_name}</title>
<meta name="keywords" content="{$site_seo_keywords}" />
<meta name="description" content="{$site_seo_description}">
<meta name="author" content="{$site_name}">
<tc_include file="Public:head" />

	<style>
		*{
			margin: 0;
			padding: 0;
			font-family:Microsoft YaHei;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration:none;
			color:  #333333;
		}
		#account_top span{
			cursor: pointer;
		}
		#account_top span:last-child{
			margin-left: 226px;
		}
		*{
			margin: 0;
			padding: 0;
			font-family:Microsoft YaHei;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration:none;
			color:  #333333;
		}
		#tabtop{
			width: 750px;
			height: 48px;
			border-bottom: solid 1px #000232;
			line-height: 48px;
			justify-content:space-between;
			display: flex;
			padding:0 40px;
		}

		#tabcontent li{
			width: 830px;
			height: 108px;
			border-bottom:1px solid #c5c5c5;
		}
		.tabcontent_title{
			font-size: 24px;
			color: #333333;
			line-height: 108px;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
		.tabcontent_time{
			font-size: 16px;
			color: #c5c5c5;
			margin-top: -24px;
			/*line-height: 120px;*/
		}
		#box{
			margin-bottom: 80px;
		}
		.color-tab {
			color: #c8161d;
		}
		.active {
			display:block;
		}
		.no-active {
			display: none;
		}
		#account_top span{
			cursor: pointer;
		}
		#account_top span:last-child{
			margin-left: 226px;
		}


		.tabcontent_number1{
			margin-left:334px;
			margin-bottom:35px;
		}
		.tabcontent_number2{
			font-size: 18px;
			color: #333333;
			margin-right: 16px;
			letter-spacing: 2px;
			display: inline-block;
			width: 80px;
			text-align:right;
		}
		.tabcontent_number3{
			height: 28px;
			border: solid 1px #707070;
			outline: none;
		}
		.tabcontent_number5{
			width: 200px;
		}
		.tabcontent_number6{
			width: 200px;
		}
		.tabcontent_number7{
			width: 200px;
		}
		.tabcontent_submit{
			width: 60px!important;
			height: 30px;
			background-color: #000232;
			border-radius: 10px;
			font-size: 18px;
			color: #ffffff;
			display: inline-block;
			text-align: center;
			line-height: 30px;
			margin-left: 135px;
			cursor: pointer;
			border:none;
		}
		.tabcontent_esc{
			width: 60px;
			height: 30px;
			background-color: #ffffff;
			border-radius: 10px;
			border: solid 1px #000232;
			font-size: 18px;
			color: #000232;
			display: inline-block;
			text-align: center;
			line-height: 30px;
			margin-left: 36px;
			cursor: pointer;
		}
		.span9 {
			margin-left: -4px;
			width: 990px;
		}
		.list-group {
			margin-left: 60px;
		}
		#tabcontent li {
			padding-left: 8px;
			padding-right: 8px;
			width: 814px;
		}
		#footer {
			width: 100%;
		}
		/*个人的中心布局样式调整*/
		.container {
			width: 1190px;
		}
		.container .title{
			font-size: 16px;
			color: #000232;
			line-height: 48px;
			padding-left: 60px;
			border-bottom: 1px solid #676884;
			margin-bottom: 18px;
		}
		.row {
			margin-left: 0px;

		}
		.span3 {
			margin-left: 0;
			width: 280px;
		}
		.span9 {
			width: 830px;
			margin-left: 80px;
		}
		/*个人的中心布局样式调整结束*/

	</style>
</head>
<body class="body-white" id="top">
	<tc_include file="Public:nav" />

	<div class="container tc-main">
		<div class="row" style="">
			<div class="span3">
				<tc_include file="Public:usernav"/>
			</div>
			<div class="span9">

				<div id="box">
					<p id="tabtop">
						<span class="color-tab">最近({$browsing_history['count']|default='0'})</span>
						<span class="">收藏({$collect_history['count']|default='0'})</span>
						<span class="">点赞({$like_history['count']|default='0'})</span>
					</p>
					<div id="tabcontent">
						<div id="browsing_history" class="active">
							<volist name="browsing_history['lists']" id="vo_bh">
								<ul>
									<li>
										<a href="{:U('portal/article/article_info', array('id' => $vo_bh['id']))}">
											<p class="tabcontent_title">{$vo_bh.post_title}</p>
											<p class="tabcontent_time">{$vo_bh.time}</p>
										</a>
									</li>
								</ul>
							</volist>
							<if condition="empty($browsing_history['lists'])">
								<div style="width: 350px;height: 266px;margin: 40px auto 0;"><img src="/public/images/img/replace.png" alt="" style="width: 100%;height: auto;"></div>
							</if>
							<div style="width:110px;height: 30px;border-radius: 15px;border: 1px solid #C8161D; color: #C8161D;font-size: 15px;text-align: center;
    			line-height: 30px;margin-left: 350px; " class="js-infinite-scroll-loading_browsing_history text-center fontmsyhbd">更多</div>
							<div id="nextpage_browsing_history"></div>
						</div>

						<div id="collect_history" class="no-active">
							<volist name="collect_history['lists']" id="vo_ch">
								<ul>
									<li>
										<a href="{:U('portal/article/article_info', array('id' => $vo_ch['id']))}">
											<p class="tabcontent_title">{$vo_ch.post_title}</p>
											<p class="tabcontent_time">{$vo_ch.time}</p>
										</a>
									</li>
								</ul>
							</volist>
							<if condition="empty($collect_history['lists'])">
								<div style="width: 350px;height: 266px;margin: 40px auto 0;"><img src="/public/images/img/replace.png" alt="" style="width: 100%;height: auto;"></div>
							</if>
							<div style="width:110px;height: 30px;border-radius: 15px;border: 1px solid #C8161D; color: #C8161D;font-size: 15px;text-align: center;
    			line-height: 30px;margin-left: 350px; " class="js-infinite-scroll-loading_collect_history text-center fontmsyhbd">更多</div>
							<div id="nextpage_collect_history"></div>
						</div>

						<div id="like_history" class="no-active">
							<volist name="like_history['lists']" id="vo_lh">
								<ul>
								<li>
									<a href="{:U('portal/article/article_info', array('id' => $vo_lh['id']))}">
										<p class="tabcontent_title">{$vo_lh.post_title}</p>
										<p class="tabcontent_time">{$vo_lh.time}</p>
									</a>
								</li>
							</ul>
							</volist>
							<if condition="empty($like_history['lists'])">
								<div style="width: 350px;height: 266px;margin: 40px auto 0;"><img src="/public/images/img/replace.png" alt="" style="width: 100%;height: auto;"></div>
							</if>
							<div style="width:110px;height: 30px;border-radius: 15px;border: 1px solid #C8161D; color: #C8161D;font-size: 15px;text-align: center;
    			line-height: 30px;margin-left: 350px; " class="js-infinite-scroll-loading_like_history text-center fontmsyhbd">更多</div>
							<div id="nextpage_like_history"></div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>


	<!-- /container -->
    <tc_include file="Public:footer" />
	<tc_include file="Public:scripts" />

	<script src="__TMPL__Public/assets/js/jquery.infiniteScroll.js"></script>
	<script src="__PUBLIC__/js/layer/layer_1.js"></script>
	<script>
        $(function(){

            $("#tabtop span").off("click").on("click", function(){
                var index = $(this).index();
                $(this).addClass("color-tab").siblings().removeClass("color-tab");
                $("#tabcontent > div").eq(index).addClass("active").removeClass('no-active').siblings().removeClass("active").addClass("no-active");
            });

            $('#nextpage_browsing_history').infiniteScroll({
                loading:'.js-infinite-scroll-loading_browsing_history',
                total_pages:{$browsing_history['count'] ?: 0},
                url : "{:U('user/center/browsing_history')}",
                success:function(content){
					if (content.status) {
					    var html = '';
					    $.each(content.lists, function (index, item) {
							html += "<ul>";
							html += "<li>";
                            html += "<a href='/index.php?g=portal&m=article&a=article_info&id=" + item.id + "'>";
							html += "<p class='tabcontent_title'>";
							html += item.post_title;
							html += "</p>";
                            html += "<p class='tabcontent_time'>";
                            html += item.time;
                            html += "</p>";
                            html += "</a>";
                            html += "</li>";
                            html += "</ul>";
                        })
                        $('.js-infinite-scroll-loading_browsing_history').before(html);
					} else {
                        $('.js-infinite-scroll-loading_browsing_history').css('display', 'none');
					}
                }
            });

            $('#nextpage_collect_history').infiniteScroll({
                loading:'.js-infinite-scroll-loading_collect_history',
                total_pages:{$collect_history['count'] ?: 0},
                url : "{:U('user/center/collect_history')}",
                success:function(content){
                    if (content.status) {
                        var html = '';
                        $.each(content.lists, function (index, item) {
                            html += "<ul>";
                            html += "<li>";
                            html += "<a href='/index.php?g=portal&m=article&a=article_info&id=" + item.id + "'>";
                            html += "<p class='tabcontent_title'>";
                            html += item.post_title;
                            html += "</p>";
                            html += "<p class='tabcontent_time'>";
                            html += item.time;
                            html += "</p>";
                            html += "</a>";
                            html += "</li>";
                            html += "</ul>";
                        })
                        $('.js-infinite-scroll-loading_collect_history').before(html);
                    } else {
                        $('.js-infinite-scroll-loading_collect_history').css('display', 'none');
                    }
                }
            });


            $('#nextpage_like_history').infiniteScroll({
                loading:'.js-infinite-scroll-loading_like_history',
                total_pages:{$like_history['count'] ?: 0},
                url : "{:U('user/center/like_history')}",
                success:function(content){
                    if (content.status) {
                        var html = '';
                        $.each(content.lists, function (index, item) {
                            html += "<ul>";
                            html += "<li>";
                            html += "<a href='/index.php?g=portal&m=article&a=article_info&id=" + item.id + "'>";
                            html += "<p class='tabcontent_title'>";
                            html += item.post_title;
                            html += "</p>";
                            html += "<p class='tabcontent_time'>";
                            html += item.time;
                            html += "</p>";
                            html += "</a>";
                            html += "</li>";
                            html += "</ul>";
                        })
                        $('.js-infinite-scroll-loading_like_history').before(html);
                    } else {
                        $('.js-infinite-scroll-loading_like_history').css('display', 'none');
                    }
                }
            });
        });
	</script>
	<script type="text/javascript">
		// Window load event used just in case window height is dependant upon images
		$(window).bind("load", function() {
			var footerHeight = 0,
					footerTop = 0,
					$footer = $("#footer");
			positionFooter();
			//定义positionFooter function
			function positionFooter() {
				//取到div#footer高度
				footerHeight = $footer.height();
				//div#footer离屏幕顶部的距离
				footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
				/* DEBUGGING STUFF
                console.log("Document height: ", $(document.body).height());
                console.log("Window height: ", $(window).height());
                console.log("Window scroll: ", $(window).scrollTop());
                console.log("Footer height: ", footerHeight);
                console.log("Footer top: ", footerTop);
                console.log("-----------")
                */
				//如果页面内容高度小于屏幕高度，div#footer将绝对定位到屏幕底部，否则div#footer保留它的正常静态定位
				if ( ($(document.body).height()+footerHeight) < $(window).height()) {
					$footer.css({
						position: "absolute"
					}).stop().animate({
						top: footerTop
					});
				} else {
					$footer.css({
						position: "static"
					});
				}
			}
			$(window).scroll(positionFooter).resize(positionFooter);
		});
	</script>
</body>
</html>